<template>
  <div class="l-rblock print-layer">
    <div
      v-if="contextmenuFlag"
      class="print-layer__contentmenu"
      :style="{ left: contentmenuX + 'px', top: contentmenuY + 'px' }"
    >
      <div class="item print-layer__contentmenu__btn" @click="handleRName">
        {{ $t("重命名") }}
      </div>
      <div class="item print-layer__contentmenu__btn" @click="handleCopy">
        {{ $t("复制") }}
      </div>
      <div
        class="item print-layer__contentmenu__btn"
        @click="handleHideAndDisplay(contextmenuObj)"
      >
        {{
          contextmenuObj && contextmenuObj.config.display
            ? $t("隐藏")
            : $t("显示")
        }}
      </div>
      <el-divider />
      <div
        class="item print-layer__contentmenu__btn"
        @click="handleDelete"
        style="color: #f56c6c;"
      >
        {{ $t("删除") }}
      </div>
    </div>

    <div class="search-input-wraper">
      <el-input
        prefix-icon="el-icon-search"
        :placeholder="$t('搜索图层')"
        size="mini"
        v-model="searchWord"
        class="search-input"
      >
      </el-input>
    </div>
    <div
      class="l-rblock"
      style="overflow: auto;padding: 0 16px;"
      @contextmenu.prevent="handleContextmenu"
    >
      <div v-for="(item, index) in listShowData" :key="index">
        <div
          v-if="!item.rName"
          :class="[
            'layer_item',
            { active: activeComponentConfig.id == item.config.id },
          ]"
          :data-index="index"
          @click="handleSetActive(index)"
        >
          <span :title="item.config.label"
            ><i :class="item.icon" style="font-size: 14px;padding-right:4px"></i
            >{{ item.config.isHeader && pageConfig.isHeaderShow == '1'?'[页眉]':''}}{{ item.config.label }}</span
          >
          <div
            :data-index="index"
            :class="['layer_item__eye', { active: !item.config.display }]"
            @click.stop="handleHideAndDisplay(item)"
          >
            <i class="learun-icon-no-eye"></i>
          </div>
        </div>
        <el-input
          v-else
          v-model="item._label"
          :placeholder="$t('请输入')"
          class="print-layer__input"
          size="mini"
          :prefix-icon="item.icon"
        >
          <el-button
            slot="append"
            icon="el-icon-check"
            @click="handleSaveName(item)"
          />
        </el-input>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    activeComponent: {
      type: Object,
      default: () => ({}),
    },
    pageConfig: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      searchWord: "",
      // 右键菜单
      contextmenuFlag: false,
      contentmenuX: "",
      contentmenuY: "",
      contextmenuIndex: -1,
    };
  },
  computed: {
    listShowData() {
      if (this.searchWord) {
        return this.list.filter(
          (item) => item.label.indexOf(this.searchWord) > -1
        );
      }
      return this.list;
    },
    activeComponentConfig() {
      if (this.activeComponent && this.activeComponent.config) {
        return this.activeComponent.config;
      }
      return {};
    },
    contextmenuObj() {
      if (this.contextmenuIndex == -1) {
        return null;
      } else {
        return this.listShowData[this.contextmenuIndex];
      }
    },
  },
  created() {},
  methods: {
    watchContextmenu(event) {
      if (
        event.target.className.indexOf("print-layer__contentmenu__btn") == -1
      ) {
        this.closeContextmenu();
      }
      window.removeEventListener("mousedown", this.watchContextmenu);
    },
    handleContextmenu(event) {
      let target = event.target;
      let flag = false;
      if (target.className.indexOf("layer_item") > -1) flag = true;
      else if (target.parentNode.className.indexOf("layer_item") > -1) {
        target = target.parentNode;
        flag = true;
      } else if (
        target.parentNode.parentNode.className.indexOf("layer_item") > -1
      ) {
        target = target.parentNode.parentNode;
        flag = true;
      }
      if (flag) {
        //console.log(event.clientY,document.body.clientHeight,'event');
        event.preventDefault();
        event.stopPropagation();
        this.contentmenuX = event.clientX;
        this.contentmenuY = event.clientY - 8;
        if(this.contentmenuY + 140 > document.body.clientHeight){
          this.contentmenuY = document.body.clientHeight - 140;
        }


        this.contextmenuIndex = target.getAttribute("data-index");
        this.contextmenuFlag = true;

        //console.log(this.contextmenuIndex, "this.contextmenuIndex");

        window.addEventListener("mousedown", this.watchContextmenu);
      }
    },
    handleSetActive(index) {
      this.$emit("setActive", this.listShowData[index]);
    },
    handleRName() {
      const selectObj = this.contextmenuObj;
      this.$set(selectObj, "_label", selectObj.config.label);
      this.$set(selectObj, "rName", true);
      this.closeContextmenu();
    },
    handleSaveName(selectObj) {
      selectObj.config.label = selectObj._label;
      selectObj.rName = false;
    },
    handleCopy() {
      const selectObj = this.contextmenuObj;
      this.$emit("copy", {
        component: this.$deepClone(selectObj),
        index: this.list.findIndex((t) => t.config.id == selectObj.config.id),
      });
      this.closeContextmenu();
    },
    handleDelete() {
      const selectObj = this.contextmenuObj;
      const index = this.list.findIndex(
        (t) => t.config.id == selectObj.config.id
      );
      this.$emit("delete", index);
      this.closeContextmenu();
    },
    handleHideAndDisplay(obj) {
      obj.config.display = !obj.config.display;
      this.closeContextmenu();
    },

    closeContextmenu() {
      this.contextmenuIndex = -1;
      this.contextmenuFlag = false;
    },
  },
};
</script>

<style lang="scss">
.print-layer {
  padding-top: 56px;

  &__contentmenu {
    position: fixed;
    width: 120px;
    background-color: #fff;
    z-index: 1024;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    padding: 4px;
    .item {
      cursor: pointer;
      font-size: 14px;
      padding: 4px 8px;
      color: #333;
      &:hover {
        color: #3399ff;
      }
    }

    .el-divider--horizontal {
      margin: 4px 0 !important;
    }
  }

  &__input {
    padding: 3px 0;
  }

  .search-input-wraper {
    position: absolute;
    width: 100%;
    padding: 16px;
    top: 0;
    left: 0;
  }

  .layer_item {
    cursor: pointer;
    position: relative;
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0 18px 0 8px;
    font-size: 14px;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    &__eye {
      position: absolute;
      right: 0;
      top: 0;
      height: 30px;
      line-height: 30px;
      padding-right: 4px;
      display: none;
      color: #333;
      z-index: 1;
      &.active {
        display: block;
      }
    }

    &:hover,
    &.active {
      background-color: #eef4ff;
      color: #3399ff;
    }

    &:hover .layer_item__eye {
      display: block;
    }
  }
}
</style>
